<template>
	<view>
		<u-navbar :title="list[current].name" :background="{background:'#FD7D62'}" back-icon-color="#FFF"
			:border-bottom="false" title-color="#FFF"></u-navbar>
		<u-tabs :list="list" :is-scroll="false" v-model="current" @change="change" bg-color="#FD7D62"
			inactive-color="#CCCCCC" active-color="#FFF"></u-tabs>
		<view class="content">
			<view class="ranking" :style="rankingList.length==0 ? 'position: relative;top: 14vw;':''">
				<view class="ranking_three ranking_second">
					<view v-if="rankingList.length !=0">
						<!-- 下面动态样式 -->
						<!-- :style="`background-image:url(${rankingList[1].avatar ?$wanlshop.oss(rankingList[1].avatar):''})`" -->
						<view class="cu-avatar round margin-left" style="margin-left: 30%;">
						</view>
						<button class="cu-btn round sm follow_with_interest_btn" @tap="follow(rankingList[1],0)"
							v-if="rankingList[1].is_follow == 0" style="background:#FF4530;width: auto;">关注</button>
						<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
							@tap="follow(rankingList[1],1)" style="margin-left: 18px;">已关注</button>
					</view>
					<view class="second public_ranking"></view>
				</view>

				<view class="ranking_three ranking_first">
					<view v-if="rankingList.length !=0">
						<!-- :style="`background-image:url(${rankingList[0].avatar ?$wanlshop.oss(rankingList[0].avatar):''})`" -->
						<view class="cu-avatar round margin-left" style="margin-left: 30%;">
						</view>

						<button class="cu-btn round sm follow_with_interest_btn" @tap="follow(rankingList[0],0)"
							v-if="rankingList[0].is_follow == 0" style="background:#FF4530;width: auto;">关注</button>
						<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
							@tap="follow(rankingList[0],1)" style="margin-left: 18px;">已关注</button>
					</view>
					<view class="first public_ranking"></view>
				</view>

				<view class="ranking_three ranking_third">
					<view v-if="rankingList.length !=0">
						<!-- :style="`background-image:url(${rankingList[2].avatar? $wanlshop.oss(rankingList[2].avatar):''})`" -->
						<view class="cu-avatar round margin-left" style="margin-left: 30%;">
						</view>
						<button class="cu-btn round sm follow_with_interest_btn" @tap="follow(rankingList[2],0)"
							v-if="rankingList[2].is_follow == 0" style="background:#FF4530;width: auto;">关注</button>
						<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
							@tap="follow(rankingList[2],1)" style="margin-left: 18px;">已关注</button>
					</view>
					<view class="third public_ranking"></view>
				</view>

			</view>
			<view class="list" v-if="rankingList.length != 0">
				<view class="item" v-for="(item,index) in rankingList" :key="index" v-show="!show">
					<view class="item-index">{{index+1}}</view>
					<view @tap="$wanlshop.to(`/pages/user/integral/worker?item=${JSON.stringify(item)}`  )">
						<image class="cu-avatar round margin-left" :src="item.avatar?$wanlshop.oss(item.avatar):''">
						</image>
					</view>
					<view class="info"
						@tap="$wanlshop.to(`/pages/user/integral/worker?item=${JSON.stringify(item)}`  )">
						<view class="tis">
							<view class="nick-name">
								{{item.real_name}}
							</view>
							<view class="gong">
								{{item.work_name}}
							</view>
						</view>

						<view style="height: 20px;color: #666666;font-size: 12px;">好评率{{item.favorable_comment_rate}}%
						</view>
					</view>
					<view style="margin-right: 4%;">
						<button class="cu-btn round sm follow_with_interest_btn"
							style="margin-top: 16%;background:#FF4530; " @tap="follow(item,0)"
							v-if="item.is_follow == 0">关注</button>
						<button class="cu-btn round sm follow_with_interest_btn guanzhu" v-else
							@tap="follow(item,1)">已关注</button>
					</view>
				</view>
				<view class="u-flex" style="justify-content: center;height: 100%;width: 100%;" v-show="show">
					<u-loading mode="flower" :show="show" size="50"></u-loading>
				</view>
			</view>

			<view v-else class="noneImg">
				<view>
					<image src="https://img.aibbyp.com/wechat/newImg/noneImg.png" mode=""></image>
				</view>
				<view class="block-font">暂无{{dataObj.name}}排行</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				dataObj: {
					id: 0
				},
				rankingList: [],
				list: [{
					name: '金牌设计' //2
				}, {
					name: '口碑工匠' //0
				}, {
					name: '金牌验收' //3
				}, {
					name: '家政服务' //4
				}, ],
				current: 0
			};
		},
		onLoad(option) {
			this.dataObj = option
			this.getRanKing()
		},
		computed: {

		},
		methods: {
			change(index) {
				this.dataObj = {
					id: index
				}
				this.current = index
				this.show = true
				this.getRanKing()
			},
			getRanKing() {
				let worker_type = 2
				if (this.dataObj.id === 0) {
					worker_type = 2
				}
				if (this.dataObj.id === 1) {
					worker_type = 0
				}
				if (this.dataObj.id === 2) {
					worker_type = 3
				}
				if (this.dataObj.id === 3) {
					worker_type = 4
				}

				this.$api.get({
					url: '/jmy/worker/list',
					data: {
						worker_type: worker_type
					},
					success: res => {
						this.rankingList = res.data
						setTimeout(() => {
							this.show = false
						}, 800)
					}
				})
			},
			follow(item, i) {
				let url = i == 0 ? '/jmy/worker/follow' : '/jmy/worker/cancelFollow'
				this.$api.post({
					url: url,
					data: {
						user_id: item.user_id
					},
					success: res => {
						this.getRanKing()
					}
				})
			},
		}
	}
</script>

<style>
	>>>.uni-placeholder {
		display: none;
	}

	.tis .nick-name {
		width: 55px;
		flex: none;
	}

	.topBar {
		display: flex;
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		font-size: 17px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #FFF;
		height: 30px;
		justify-content: center;
		margin-top: 8px;
		align-items: center;
		/* #ifdef APP-PLUS */
		margin-top: 20px;
		/* #endif */
	}

	.top-back image {
		width: 25.8px;
		height: 21px;
	}

	.top-back {
		width: 33%;

	}

	.top-centet {
		width: 33%;
		text-align: center;
	}

	.top-right {
		width: 33%;
		text-align: right;
		padding-right: 10px;
	}

	.content {
		padding: 0px 4% 0 4%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/top.png");
		background-repeat: repeat;
		background-size: 100% 110%;
		height: calc(100vh - 164rpx);
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 250rpx);
		/* #endif */
	}

	.ranking {
		display: flex;
		flex-direction: row;
		padding-top: 10%;
		height: 33%;
		padding-left: 10%;
		padding-right: 10%;
		/* #ifdef MP-WEIXIN */
		height: 230rpx;
		padding-top: 0;
		/* #endif */
		/* #ifndef MP-WEIXIN */

		height: 380rpx;
		/* #endif */
	}

	.ranking_avatar {
		width: 40px;
		height: 40px;
		border: 1px solid black;
		border-radius: 50%;
		margin-left: 50upx;
	}

	.block-font {
		margin-top: 20px;

		font-size: 18px;
		color: rgba(153, 153, 153, 1);
		font-weight: 500;
	}

	.follow_with_interest_btn {
		width: 50px;
		height: 21px;
		font-size: 12px;
		margin-left: 25%;
		background: #FF4530;
		color: #FFFFFF;
	}

	.ranking_three {
		width: 33.333%;
	}

	.ranking_second {
		padding-top: 15%;
	}

	.ranking_first {
		padding-top: 4%;
	}

	.ranking_third {
		padding-top: 22%;
	}

	.second {
		height: 82.7%;
		margin-top: -33%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/two.png");
	}

	.first {
		margin-top: 10%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/one.png");
		background-size: 100% 101%;
		margin-left: -1px;
		height: 86.5%;
		margin-top: -32.5%;
	}

	.third {
		height: 77.5%;
		margin-top: -31.5%;
		background-image: url("https://img.aibbyp.com/wechat/images/artison/ranking/tree.png");
		margin-left: -10upx;

	}

	.public_ranking {
		width: 100%;
		background-repeat: no-repeat, repeat;
		background-size: 100% 100%;
	}

	.noneImg {
		width: 100%;
		height: 75%;
		border: 2px solid #FFEBEB;
		border-radius: 10px 10px 0px 0px;
		background: #FFF;
		text-align: center;
	}

	.noneImg image {
		margin: 0 auto;
		margin-top: 10vh;
		width: 70vw;
		height: 30vh;
	}

	.list {
		width: 100%;
		border-radius: 10px 10px 0px 0px;
		background: #FFF;
		display: flex;
		flex-direction: column;
		overflow: scroll;
		height: 70%;
		/* #ifdef MP-WEIXIN */
		margin-top: 22rpx;
		height: 75%;
		/* #endif */
	}

	.item {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 37px;
		margin-top: 5%;
	}

	.item-index {
		left: 0px;
		top: 5px;
		width: 10px;
		opacity: 1;
		font-family: Source Han Sans;
		font-size: 15px;
		font-weight: 500;
		font-feature-settings: "kern" on;
		line-height: 35px;
		color: #FF5F5F;
		margin-left: 2%;
	}

	.tis {
		display: flex;
	}

	.guanzhu {
		border-radius: 33px;
		font-size: 10px;
		/* -webkit-font-feature-settings: "kern" on; */
		/* font-feature-settings: "kern" on; */
		color: #808080;
		z-index: 0;
		background: #F5F5F5;
		margin-left: 5px;
		width: 63px;
		height: 21px;
	}

	.gong {
		width: auto;
		height: 19px;
		padding: 0 5px;
		border-radius: 26px;
		opacity: 1;
		text-align: center;
		box-sizing: border-box;
		border: 1px solid #FFC2F9;
		margin-left: 10px;
		font-family: 思源黑体;
		font-size: 12px;
		color: #D800C2;
		z-index: 0;
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		overflow: hidden;
		/* 超出容器的文本隐藏 */
		text-overflow: ellipsis;
	}

	.info {
		height: 40px;
		display: flex;
		flex-direction: column;
		margin-left: 3%;
		font-size: 13px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #333333;
		width: 56%;
	}
</style>